<template>
  <view class="search-container">
    <!-- 搜索输入框 -->
    <view class="search-box">
      <uni-search-bar :focus="true" cancelButton="none" radius="50" @input="input"></uni-search-bar>
    </view>
    <!-- 搜索历史 -->
    <view class="history-box" v-if="searchResults.length === 0">
      <view class="history-clear">
        <text>搜索历史</text>
        <uni-icons type="trash" size="20" @click="clearHistory"></uni-icons>
      </view>
      <view class="history-key">
        <uni-tag type="primary" :text="item"  v-for="(item, i) in searchKeys" :key="i" @click="gotoGoodsList(item)"></uni-tag>
      </view>
    </view>
    
    <!-- 搜索列表 -->
    <view class="search-results-list" v-else>
      <view class="result-item" v-for="(item, i) in searchResults" :key="i">
        <text>{{item.goods_name}}</text>
        <uni-icons type="arrowright"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        timerId: null,
        kw: '', // 搜索关键词
        searchResults: [], // 关键词搜索结果
        searchKeys: [], // 搜索关键词列表
      };
    },
    onLoad() {
      // 读取本地保存的搜索历史关键词
      this.searchKeys = JSON.parse( uni.getStorageSync('kw') || '[]' )
    },
    methods: {
      input(value){
        console.log(value)
        
        clearTimeout(this.timerId)
        this.timerId = setTimeout(() => {
          console.log('搜索数据',value)
          
          if(!value.trim()){
            this.searchResults = []
            this.kw = ''
            return
          }
          this.kw = value
          // 搜索关键词列表
          this.getSearchResults()
          
          // 保存搜索关键词到搜索历史列表中
          this.saveSearchKeys()
          
          // 搜索关键词判断不为空发起搜索，否则清空搜索结果并不发起搜索
          // if(value.trim()){
          //   console.log('====')
          //   this.kw = value
          //   // 搜索关键词列表
          //   this.getSearchResults()
          // }else{
          //   console.log('-----')
          //   // 清空搜索结果
          //   this.searchResults = []
          // }
          
        }, 1000)
      },
      // 获取关键词搜索数据
      async getSearchResults(){
        const { data: res } = await uni.$http.get('/goods/qsearch', {query: this.kw})
        console.log(res)
        // 数据异常判断
        if(res.meta.status !== 200) return uni.$showMsg()
        
        // 设置页面数据
        this.searchResults = res.message
      },
      // 保存搜索关键词到搜索历史列表中
      saveSearchKeys(){
        // 添加之前，判断 kw 是否在 searchKeys 中
        // 在的话，删除，kw，添加到开头
        // 不在的话，直接添加到开头
        const index = this.searchKeys.indexOf(this.kw)
        if(index > -1){// 找到了
          // [1,2,3]
          this.searchKeys.splice(index, 1)
          this.searchKeys.unshift(this.kw)
        }else{// 没找到
          this.searchKeys.unshift(this.kw)
        }
        
        // 保存用户搜索历史到本地
        uni.setStorageSync('kw', JSON.stringify(this.searchKeys))
      },
      // 清空搜索历史记录
      clearHistory(){
        this.searchKeys = []
        // 清空本地
        // uni.setStorageSync('kw', '[]')
        uni.removeStorageSync('kw')
      },
      // 点击搜索历史跳转到商品列表页
      gotoGoodsList(item){
        uni.navigateTo({
          url: `/subpkg/goods_list/goods_list?query=${item}`
        })
      }
    }
  }
</script>

<style lang="scss">
  
  // page {
  //   background-color: #c00000;
  //   .search-container {
  //     background-color: white;
  //     height: 100%;
      .search-box {
        background-color: #c00000;
        position: sticky;
        top: 0;
      }
      
      .history-box {
        .history-clear {
          display: flex;
          height: 70rpx;
          justify-content: space-between;
          align-items: center;
          margin: 8rpx;
          padding: 8rpx;
          border-bottom: 1rpx solid #efefef;
        }
        
        .history-key {
          padding: 16rpx 0;
          
          uni-tag {
            margin-left: 16rpx;
          }
        }
      }
      
      .search-results-list {
        
        .result-item {
          height: 80rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 24rpx;
          border-bottom: 1px solid #efefef;
          padding: 0 16rpx;
          
          text {
            // 超过一行省略号
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
  //   }
    
  // }
  
  
  
</style>
